<template>
  <div style="width: 100vw; height: 100vh">
    <el-container style="width: 100vw; height: 100vh">
      <el-container>
        <el-menu
          default-active="1-4-1"
          class="el-menu-vertical-demo"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">招聘</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="">
                <span slot="title"> 候选人 </span>
              </el-menu-item>
              <el-menu-item index="">
                <span slot="title"> 人才库 </span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span slot="title">日程</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="">
                <span slot="title"> 待办日程 </span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span slot="title">薪酬</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/money/moneyList">
                <span slot="title"> 工资条 </span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">社保公积金</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/s/fileList">
                <span slot="title">参保档案</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span  slot="title">会议室</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/mine/conferenceList">
                <span slot="title">会议室管理</span>
              </el-menu-item>
              <el-menu-item index="/mine/mineList">
                <span slot="title">我的会议</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span>考勤</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/PunchWay">
                <span slot="title">打卡地址</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span>绩效</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="">
                <span slot="title">考核进度</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span>行政</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="">
                <span slot="title">公告</span>
              </el-menu-item>
              <el-menu-item index="">
                <span slot="title">文档</span>
              </el-menu-item>
              <el-menu-item index="">
                <span slot="title">新闻</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span>审批记录</span>
            </template>
            <el-menu-item-group>

            </el-menu-item-group>
          </el-submenu>

          <!--          <el-menu-item index="/jiuye">-->
          <!--            <i class="el-icon-phone"></i>-->
          <!--            <span slot="title">就业跟踪</span>-->
          <!--          </el-menu-item>-->
          <!--          <el-submenu index="3">-->
          <!--            <template slot="title">-->
          <!--              <i class="el-icon-s-custom"></i>-->
          <!--              <span>用户管理</span>-->
          <!--            </template>-->
          <!--            <el-menu-item-group>-->
          <!--              <el-menu-item index="/userlist">用户列表</el-menu-item>-->
          <!--              <el-menu-item index="/rolelist" v-if="flag"-->
          <!--                >角色管理</el-menu-item-->
          <!--              >-->
          <!--              <el-menu-item index="/perlist" v-if="flag">权限管理</el-menu-item>-->
          <!--            </el-menu-item-group>-->
          <!--          </el-submenu>-->
        </el-menu>
        <el-main>
          <el-header>
            <div class="left" style="cursor: pointer">
              <!-- <i
                :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
                autocomplete="auto"
                @click="isCollapse = !isCollapse"
              /> -->
            </div>
            <!-- <el-breadcrumb separator="/" class="crumb">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          </el-breadcrumb> -->
            <div class="right">
              <div style="float: left">
                <span>{{ nowDate + " " + nowTime + " " + nowWeek }}</span>
                <el-dropdown @command="handleCommand">
                  <span
                    class="el-dropdown-link"
                    style="color: black; font-size: 14px"
                  >{{ userinfo.roleName }}: {{ userinfo.tname
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-user" command="/myinfo"
                    >个人中心</el-dropdown-item
                    >
                    <el-dropdown-item
                      icon="el-icon-switch-button"
                      @click.native="exit()"
                    >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </el-header>
          <div class="bottom">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import all from '../../assets/js/all'
export default {
  data () {
    return {
      // 展开闭合目录
      isCollapse: true,
      // 获取登录id
      userid: sessionStorage.getItem('userid'),
      // 用户详细信息
      userinfo: {},
      // 判断权限状态
      myperflag: false,
      // 管理员权限判断
      flag: false,

      nowDate: '',
      nowTime: '',
      nowWeek: ''
    }
  },
  created () {
    // 调用查询教师详细信息
    this.teacherinfo()
  },
  mounted () {
    this.currentTime()
  },
  provide () {
    return {
      goBack: this.teacherinfo
    }
  },
  methods: {
    currentTime () {
      setInterval(this.getDate, 1000)
    },
    // 销毁定时器
    beforeDestroy: function () {
      if (this.getDate) {
        console.log('销毁定时器')
        clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
      }
    },
    getDate: function () {
      const _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const week = new Date().getDay()
      const hh = new Date().getHours()
      const mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      const ms =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      if (week === 1) {
        this.nowWeek = '星期一'
      } else if (week === 2) {
        this.nowWeek = '星期二'
      } else if (week === 3) {
        this.nowWeek = '星期三'
      } else if (week === 4) {
        this.nowWeek = '星期四'
      } else if (week === 5) {
        this.nowWeek = '星期五'
      } else if (week === 6) {
        this.nowWeek = '星期六'
      } else {
        this.nowWeek = '星期日'
      }
      _this.nowTime = hh + ':' + mf + ':' + ms
      _this.nowDate = yy + '/' + mm + '/' + dd
    },
    // 退出登录
    exit () {
      sessionStorage.removeItem('userid')
      sessionStorage.removeItem('token')
      this.$router.push('/')
    },
    // 判断有没有权限
    async authority (id, url) {
      this.myperflag = await all.findteacherinfo(id)
      console.log(this.myperflag)
      if (this.myperflag) {
        this.$router.push(url)
      } else {
        this.$message.error('你的权限不足')
      }
    },
    // 查询教师详细信息
    teacherinfo () {
      this.$axios
        .get('/teacherinfo/getById', { params: { id: this.userid } })
        .then((res) => {
          this.userinfo = res.data
          console.log(res.data.roleId)
          // eslint-disable-next-line eqeqeq
          if (res.data.roleId == 18) {
            this.flag = true
          } else {
            this.flag = false
          }
          console.log(this.userinfo)
        })
    },
    // 跳转页面
    handleCommand (command) {
      this.$router.push(command)
    }
  }
}
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-main {
  padding: 0;
  height: 100%;
}
.left {
  float: left;
}
.right {
  float: right;
  margin-right: 30px;
}
.img {
  margin-top: 10px;
  margin-left: 20px;
}
.el-dropdown {
  left: 20px;
  cursor: pointer;
}
.crumb {
  margin-top: 22px;
  margin-left: 36px;
  font-size: 14px;
  color: black !important;
  float: left;
}
.bottom {
  width: 95%;
  height: 85%;
  margin: 2% auto;
}
.el-menu {
  text-align: left;
}
</style>
